<template>
  <div style="height: 100%">
    <div v-if="isShowInfo" class="info_bg">
      <div class="info">
        <i style="font-size:104px; color: rgb(48, 159, 253);" class="el-icon-warning-outline"></i>
      </div>
      <div class="title"><span class="tips">请在微信客户端扫码打开链接</span></div>
    </div>
    <div class="first_bg" v-else>
      <div class="wrapper" v-if="state == 1">
        <img style="width: 100%" src="https://image.utea88.com/statics/zch_xcx/home/ICBC/introduce.png" alt="">
        <div class="content_bg">
          <div class="title">众茶贷</div>
          <div class="title_desc">中国工商银行为扶持中小微企业，与广东众茶国际供应链管理有限公司平台合作；对入驻众茶国际平台的中小微企业，且在众茶国际平台产生交易的企业（商户）提供更多的金融服务，有需要的商户通过如下通道提交相关资料申请贷款。</div>
          <div class="spec">产品特点</div>
          <div class="spec_detail_bg">
            <div class="detail_content">
              <div class="desc">手续简</div>
              <div class="desc">放款快</div>
            </div>
            <div class="detail_content">
              <div class="desc">额度高</div>
              <div class="desc">最高500万</div>
            </div>
            <div class="detail_content">
              <div class="desc">期限长</div>
              <div class="desc">最长12个月</div>
            </div>
            <div class="detail_content">
              <div class="desc">年费率低</div>
              <div class="desc">3.45%起</div>
            </div>
          </div>
          <div class="two_btn_bg">
            <div @click="handleClick(1)" class="loan_btn">e抵贷</div>
            <div @click="handleClick(2)"  class="loan_btn">e信贷</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOpenIdByCode } from '@/api/user'

export default {
  name: "ZcLoan",
  props: {

  },
  components: {

  },
  data() {
    return {
      isShowInfo:false,
      openId: '',
      scanState: 1, //1:扫码，2：公众号进入
      phone: '',// 业务人员手机号
      type: '',//1资产，2流水
      state: 0
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    GetUrlParam(name) {
      let temp = new URL(window.location.href.replace('#/loan?', '&'))
      // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL（查询部分）
      let url = temp.search;

      // 正则筛选地址栏
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      // 匹配目标参数
      var result = url.substring(1).match(reg);
      //返回参数值
      return result ? decodeURIComponent(result[2]) : null;
    },
    handleClick(type) {
      this.type = type
      this.$router.push({
    		path: "/loanSave",
    		query: {
          openId: this.openId,
          scanState: this.scanState, 
          phone: this.phone,
          type: this.type,
    		}
    	});
    }
  },
  created() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      if (window.location.href.indexOf("?code") > 0) {
        this.isShowInfo = false;

        if (window.location.href.indexOf("?phone") > 0) {
          this.phone = this.GetUrlParam("phone")
          this.scanState = 1
        } else {
          this.scanState = 2
        }

        let code = this.GetUrlParam("code")
        getOpenIdByCode({ code: code, state: 'wangrunfeng'}).then(res => {
          this.openId = res
          this.state = 1
        })
        .catch((err) => {
          console.log(err)
        })
      } else {
        this.isShowInfo = false;
        var targetUrl = 'https://utea88.com/#/loan?phone=' + this.$route.query.phone

        var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" 
        + "wx0ef0b183470e3032" + 
        "&redirect_uri=" + encodeURIComponent(targetUrl) 
        + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"

        window.location.href = url
      }
    } else {
      this.isShowInfo = true;
    }
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .info_bg {
    padding-top: 35px;
    .info {
      position: relative;
      display: flex;
      justify-content: center;
      
      width: 100%;
    }

    .title {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      width: 100%;
    }

    .tips {
      font-weight: 400;
      font-size: 20px;
      color: black;
    }
  }

  .first_bg {
    position: relative;
    height: 100%; 

    .wrapper {
      position: relative;
      width: 100%;
      height: 100%; 
      background-color: #FDF1F1;

      .content_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        .title {
          position: relative;
          margin-top: 100px;
          margin-left: 16px;
          width: 70px;
          height: 30px;
          font-size: 18px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background-color: rgb(230, 15, 26);
        }

        .title_desc {
          margin-top: 10px;
          margin-left: 16px;
          width: calc(100% - 32px);
          font-size: 18px;
          font-weight: 400;
          color: black;
        }

        .spec {
          position: relative;
          margin-top: 10px;
          margin-left: 16px;
          width: 88px;
          height: 30px;
          font-size: 18px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background-color: rgb(230, 15, 26);
        }

        .spec_detail_bg {
          display: flex;
          align-items: center;
          margin-top: 10px;
          margin-left: 16px;
          width: calc(100% - 32px);
          height: 80px;
          background: rgb(255, 222, 222);

          .detail_content {
            flex: 1;
            height: 40px;
            border-right: 1px solid white;

            &:nth-child(4) {
              border: 0;
            }
            
            .desc {
              width: 100%;
              height: 20px;
              font-size: 14px;
              text-align: center;
              line-height: 20px;
              color: black;
            }
          }
        }
      }
    }

    .two_btn_bg {
      position: relative;
      margin-top: 20px;
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;

      .loan_btn {
        width: 150px;
        height: 100%;
        font-size: 20px;
        color: white;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        background: #FF901A;

        &:nth-child(2) {
          background: #E60F1A;
        }
      }
    }
  }
</style>